<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Gesture Detector | Onsen UI</title>
  <link rel="stylesheet" href="../../build/css/onsenui.css">
  <link rel="stylesheet" href="../../build/css/onsen-css-components.css">

  <script src="../../build/js/onsenui.js"></script>

  <script>
    ons.ready(function () {

      var eventNames =
        ('drag dragleft dragright dragup dragdown hold release swipe swipeleft swiperight ' +
          'swipeup swipedown tap doubletap touch transform pinch pinchin pinchout rotate').split(' ');

      eventNames.forEach(function (eventName) {
        document.getElementById('detect').addEventListener(eventName, function (event) {
          if (event.type !== 'release') {
            event.target.innerHTML = event.type;
          }
        });
      });
    });
  </script>

</head>

<body>

  <ons-page>
    <ons-toolbar>
      <div class="center">Gesture Detector</div>
    </ons-toolbar>

    <ons-gesture-detector id="detect" style="height: 300px; margin: 50px 50px;">
      <div id="hoge" style="border: 1px solid #ccc; background-color: #f9f9f9; width: 100%; height: 300px; line-height: 300px; text-align: center; color: #999;">
        ...
      </div>
    </ons-gesture-detector>

    <p style="margin: 0 50px; color: #ccc;">Supporting events: Drag, Hold, Release, Swipe, Tap, DoubleTap, Transform, Pinch, Rotate</p>
  </ons-page>

</body>

</html>
